<template>
	<view>
		<view class="dao_card_bg"></view>
		<view class="dao_card">
			<!-- logo -->
			<view class="dao_logo">
				<image :src="daoInfoDetail.logo" mode=""></image>
			</view>
			<!-- 详细内容 -->
			<view class="dao_content">
				<view class="title">
					{{ daoInfoDetail.daoName }}
				</view>
				<!-- like展示 -->
				<view class="likeList">
					<view class="likeList_item" v-for="item in likeList" :key=item.iconName>
						<image :src="item.src" mode="" class="app_logo"></image>
						<!-- <u-icon :name="item.iconName" color="var(--echo-main-color)" size="28"></u-icon> -->
						<view class="num">{{item.amount}}</view>
					</view>
				</view>
				<!-- 支持按钮 -->
				<view class="support_btn">
					<view class="support">支持DAO</view>
					<view class="proverb">奔向星辰大海</view>
				</view>
				<BsinTitle text="愿景"></BsinTitle>
				<view class="description">
					{{ daoInfoDetail.vision }}
				</view>
				<BsinTitle text="使命"></BsinTitle>
				<view class="description">
					{{ daoInfoDetail.mission }}
				</view>
				<BsinTitle text="简介"></BsinTitle>
				<view class="description">
					{{ daoInfoDetail.profile }}
				</view>
			</view>
			<view class="under_box">
				<u-toast ref="uToast"></u-toast>
				<view class="join_btn">
					<u-button v-if="submitStatus == 0" text="申请加入" @click="onBoarding(toastInfo)"
						color="var(--echo-main-color)" shape="circle">
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDaoDetail,
		onBoardingDao
	} from '@/config/dao.js'
	export default {
		data() {
			return {
				// 点赞收藏关注
				token: '',
				likeList: [{
						iconName: 'man-add',
						amount: '100人',
						src: '../static/images/dao/member.png',
					},
					{
						iconName: 'star',
						amount: '$100',
						src: '../static/images/dao/treasury.png',
					},
					{
						iconName: 'heart',
						amount: '90个',
						src: '../static/images/dao/task.png',
					}
				],
				toastInfo: {
					type: 'default',
					message: "需要持有s11e dao 身份NFT",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				},
				// dao信息
				daoInfoDetail: {},
				submitStatus: 0,
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token');
		},
		async onLoad({
			serialNo
		}) {
			// 活动详情
			this.daoInfoDetail = (await getDaoDetail({
				serialNo
			})).data
		},
		methods: {

			// 加入dao
			async onBoarding(params) {
				if (!this.token) {
					uni.$u.toast('请先登陆')
					return
				}
				var tenantId = this.daoInfoDetail?.tenantId
				var res = await onBoardingDao({
					tenantId
				});
				if (res.code !== '000000') {
					this.$refs.uToast.show({
						message: res.data.massege,
						complete() {
							params.url && uni.navigateTo({
								url: params.url
							})
						}
					})
				} else {
					// 将加入按钮置灰
					this.submitStatus = 1
					this.$refs.uToast.show({
						message: "加入成功"
					})
				}
			},
			// 跳转支持 其他小程序
			goToMiniProgram(tenantId) {
				console.log('tenantId', tenantId);
				// 通知宿主
				let data = {
					tenantId: tenantId,
					version: '1.0.0',
					url: 'http://www.huoyuanshequ.com/__UNI__C81108F.wgt',
					uniappID: '__UNI__C81108F'
				}
				uni.sendNativeEvent("DownloadAndOpen", data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dao_card_bg {
		height: 400rpx;
		background-color: $echo-main-color;
	}

	.app_logo {
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
	}

	.dao_card {
		z-index: 2;
		top: -100rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 0 40rpx;

		// logo
		.dao_logo {
			width: 160rpx;
			height: 160rpx;
			overflow: hidden;
			margin: 0 auto;
			position: relative;
			top: -80rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		// content
		.dao_content {
			padding-bottom: 200rpx;

			// 标题
			.title {
				font-size: $echo-font-size-title;
				font-weight: 700;
				text-align: center;
				margin-top: -20rpx;
			}

			// 点赞收藏列表
			.likeList {
				margin: 40rpx;
				display: flex;
				justify-content: center;

				&_item {
					display: flex;
					width: 30%;
					align-items: center;
					justify-content: center;

					.num {
						margin-left: 16rpx;
					}
				}
			}

			// 支持按钮
			.support_btn {
				display: flex;
				align-items: center;
				padding: 20rpx;
				background-color: $echo-main-color;
				font-weight: 400;
				border-radius: 8rpx;
				color: #fff;

				.support {
					margin-left: 20rpx;
				}

				.proverb {
					flex: 1;
					text-align: right;
					margin-right: 20rpx;
				}
			}

			// 描述信息
			.description {
				padding: 0 30rpx;
				line-height: 60rpx;
			}
		}

		.under_box {
			position: fixed;
			padding: 40rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #f8f9fa;
			border-top: 0.5px solid #dee2e6;

			.join_btn {
				width: 90%;
			}
		}
	}
</style>
